<template>
	<view class="product-detail" v-if="productDetail.albumPics">
		<swiper indicator-dots autoplay :interval="3000" :duration="1000">
			<swiper-item v-for="item in albumPicsToArr()" :key="item">
				 <image :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		
		<view>
			<uni-icons :color="isCollected?'#f00':''" type="star" size="40" @tap="collectedProduct"></uni-icons>
		</view>
		<!-- 商品详情 -->
		<!-- <view v-html="productDetail.detailMobileHtml"></view> -->
		<mp-html :content="productDetail.detailMobileHtml" :tag-style="imgStyle"/>
		<view class="footer">
			<button @tap="btnClickEvent(1)">加入购物车</button>
			<button @tap="btnClickEvent(0)" type="primary">立即购买</button>

		</view>
		
		<!-- 弹框 -->
		<view class="masker" v-if="isShowMasker" @touchmove.prevent.stop>
			<div class="box">
				<uni-icons type="close" size="40" @tap="closeMasker"></uni-icons>
				<view v-for="item in productDetail.skuList" :key="item.id">
					<!-- | 管道 -->
					{{item.spData | formatSpData}}
				</view>
				<button @tap="btnConfirm">确定</button>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		productDetail,
		addCart,
		addPreOrder
	} from '@/api/productDetail/index.js'
	import mix from '@/mixins/index.js'
	import mixOther from '@/mixins/index.js'
	export default {
		name:'ProdouctDetail',
		mixins:[mix],
		data() {
			return {
				flag:0,// 加入购物车1  立即购买 0
				isShowMasker:false,// 是否显示遮罩层
				isCollected:false,//商品是否收藏过
				productId:'',
				productDetail:{},
				imgStyle:{
					// key :value
					img:'padding: 0 40rpx;box-sizing: border-box;'
				}
			};
		},
		filters:{
			formatSpData(spdata){
				// "[{\"key\":\"颜色\",\"value\":\"时尚黑1\"},{\"key\":\"大小\",\"value\":\"中\"}]"
				try{
					let spArr = JSON.parse(spdata)
					let spStr = ""
					for(let i = 0 ;i<spArr.length ;i++){
						let item = spArr[i]
						spStr+= ","+item.key + ":"+item.value 
					}
			
					return spStr.substring(1)
				}catch(e){
					console.log("e=>",e);
				}
				
			}
		},
		onLoad(options) {
			this.productId = options.id
			this.getProdcutDetail()
			// 1. 先从本地取收藏列表
			let productCollectedList = uni.getStorageSync('product-collected')
			if(productCollectedList){
				// 判断 当前这个商品是否收藏过
				// let item = productCollectedList.find(ele=>ele===this.productId)
				let item = productCollectedList.find(ele=>ele.id===this.productId)
				if(item){ // 当前这个商品收藏过
					this.isCollected = true
				}
			}
		},
		methods:{
			async getProdcutDetail(){
				const res = await productDetail(this.productId)
				this.productDetail = res.data.product
				// 设置标题
				uni.setNavigationBarTitle({
					title:this.productDetail.name
				})
			},
			albumPicsToArr(){
				return this.productDetail.albumPics.split(',')
			},
			// 收藏商品
			collectedProduct(){
				if(this.checkIsLogin()){
					// 收藏

					// 1. 先从本地取收藏列表
					let productCollectedList = uni.getStorageSync('product-collected')
					if(productCollectedList){ // 应用收藏过商品
						// 判断 当前这个商品是否收藏过
						// let item = productCollectedList.find(ele=>ele===this.productId)
						let item = productCollectedList.find(ele=>ele.id===this.productId)
						if(item){ // 当前这个商品收藏过
						  // let index = productCollectedList.findIndex(ele=>ele===this.productId)
						  let index = productCollectedList.findIndex(ele=>ele.id===this.productId)
							productCollectedList.splice(index,1)
							this.isCollected = false
						}else{ // 当前这个商品没有收藏过
							// productCollectedList.push(this.productId)
							productCollectedList.push(this.productDetail)
							this.isCollected = true
						}
						// 最后需要把 列表 再设置回去
						uni.setStorageSync("product-collected",productCollectedList)
					}else{ // 应用没有收藏过商品
						// uni.setStorageSync("product-collected",[this.productId])
						uni.setStorageSync("product-collected",[this.productDetail])
						this.isCollected = true
					}
				}
			},
			// 添加购物车或者立即购买
			btnClickEvent(flag){
				this.isShowMasker = true
				this.flag = flag
			},
			// 关闭遮罩层
			closeMasker(){
				this.isShowMasker = false
			},
			async btnConfirm(){
				// 判断是否登录
				if(!this.checkIsLogin()) return
				if(this.flag){ // 加入购物车
					// uni.showToast({
					// 	title:'加入购物车'
					// })
					const res = await addCart({
							"productId": this.productId,
							"productSkuId": this.productDetail.skuList[0].id,
							"quantity": 1
						})
				}else{ // 立即购买
					// uni.showToast({
					// 	title:'立即购买'
					// })
					const res = await addPreOrder({
								"orderItemList": [
									{
									
										"productId":this.productId,
										"productQuantity": 1,
										"productSkuId":  this.productDetail.skuList[0].id
									}
								]
							})
							const {success,message,data} = res
							if(success){
								const {orderId} = data
								uni.navigateTo({
									url:`/pages/confirmOrder/confirmOrder?orderid=${orderId}`
								})
							}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.product-detail{
	padding-bottom: 100rpx;
	background-color: #f1ece7;
	// ::v-deep img{
	//   padding: 0 40rpx;
	// 	box-sizing: border-box;
	// }
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		height: 100rpx;
		button{
			flex: 1;
		}
	}
	
	.masker{
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		.box{
			width: 80%;
			height: 60%;
			background-color: #fff;
			border-radius: 20rpx;
		}
	}
}
</style>
